<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
	<!--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">-->
	<!--<meta content="yes" name="apple-mobile-web-app-capable">-->
	<!--<meta content="black" name="apple-mobile-web-app-status-bar-style">-->
	<!--<meta content="telephone=no" name="format-detection">-->
	<link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
	<link rel="bookmark" href="../static/favicon.ico"/>
	<title>Monster Creator</title>
	<link rel="stylesheet" href="../static/css/common.css">
	<link rel="stylesheet" href="../static/css/draw_monster1.css">



</head>
<body ontouchmove="event.preventDefault()">
<div id="wrap">
	<div id="mHead">
		<img src="../static/images/mHead.png" alt="">
	</div>
	<div id="topMenu">
		
		<div id="back">
			<img src="../static/images/back.png" alt="">
		</div>
		<div id="new">
			<img src="../static/images/new.png" alt="">
		</div>
        <div id="hot">
            <img src="../static/images/hot.png" alt="">
        </div>
	</div>
	<div id="allMonsters">
		
	</div>
</div>

</body>
<script src="../static/js/common.js"></script>
<script>
	var wrap = document.getElementById('wrap');
	var mHead = document.getElementById('mHead');
	var topMenu = document.getElementById('topMenu');
	var topMenuNumber = topMenu.getElementsByTagName('div');
	var clientH = document.documentElement.clientHeight;
    var clientW = document.documentElement.clientWidth;
    var allMonsters = document.getElementById('allMonsters');
    var back = document.getElementById('back');
    var newP = document.getElementById('new');
    var hot = document.getElementById('hot');
    wrap.style.height = clientH +'px';
    wrap.style.width = clientW < clientH * 0.75 ? clientW+'px' : clientH*0.6+'px';
    mHead.style.height = clientH*0.064+'px';
    topMenu.style.height = clientH*0.082+'px';

    for(var i=0;i<topMenuNumber.length;i++){
        topMenuNumber[i].style.height = topMenu.offsetHeight*0.45+'px';
        topMenuNumber[i].style.margin = topMenu.offsetHeight*0.25+'px ' +topMenu.offsetHeight*0.22+'px';
    }
    topMenuNumber[1].style.height = topMenu.offsetHeight*0.35+'px';
    topMenuNumber[1].style.margin = topMenu.offsetHeight*0.12+'px ' +topMenu.offsetHeight*0.22+'px';
    topMenuNumber[2].style.height = topMenu.offsetHeight*0.35+'px';
    topMenuNumber[2].style.margin = topMenu.offsetHeight*0.12+'px ' +topMenu.offsetHeight*0.22+'px';
    var monsters = [
    		{'image':'../static/images/monster1.png', 'loveImg': '../static/images/love.png', 'isLove': true},
    		{'image':'../static/images/monster2.png', 'loveImg': '../static/images/love.png', 'isLove': true},
    		{'image':'../static/images/monster3.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
    		{'image':'../static/images/monster4.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
    		{'image':'../static/images/monster5.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster6.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster7.png', 'loveImg': '../static/images/love.png', 'isLove': true},
            {'image':'../static/images/monster8.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster9.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster10.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster11.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster12.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster13.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster14.png', 'loveImg': '../static/images/love.png', 'isLove': true},
            {'image':'../static/images/monster15.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster16.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster17.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster18.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster19.png', 'loveImg': '../static/images/noLove.png', 'isLove': true},
            {'image':'../static/images/monster20.png', 'loveImg': '../static/images/love.png', 'isLove': true},
    	];
    var allmonstersContent = '';
    for(var i=0;i<monsters.length;i++){
    	allmonstersContent += '<div class="monsterBox">';
    	allmonstersContent += ' <div class="monster"><img src="'+monsters[i].image+'"></div>';
    	allmonstersContent += ' <div class="loveBox">';
    	if(monsters[i].isLove) allmonstersContent += '<div class="love"><img src="'+monsters[i].loveImg+'"></div>';
    	allmonstersContent += ' </div>';  
    	allmonstersContent += '</div>';
    }
    allmonstersContent += '<div class="monsterBox"><div class="monster addMonster"><img src="../static/images/addMonster.png" onclick="window.location.href=\'draw_monster.html?timeStamp=\'+new Date().getTime();"></div></div>';
    allMonsters.innerHTML = allmonstersContent;
    var monsterBoxes = selectByClass(allMonsters,'monsterBox');
    for(var i=0;i<monsterBoxes.length;i++){
    	monsterBoxes[i].style.height = clientH/6 + 'px';
    }
    back.addEventListener('click', function(){
        window.history.back();
    });
</script>
</html>